<template>
  <view class="center-banner">
    <view class="center-banner-menu">
      <view
        class="center-banner-menu-item"
        @tap="handleMagnetClick('menu')"
      >
        <image
          src="/static/images/index/ddzq.png"
          class="center-banner-menu-item-image"
        />
      </view>
      <view
        class="center-banner-menu-item"
        @tap="handleMagnetClick('menu')"
      >
        <image
          src="/static/images/index/xwws.png"
          class="center-banner-menu-item-image"
        />
      </view>
    </view>
    <view class="center-banner-magnet">
      <view
        class="center-banner-magnet-item"
        @tap="handleMagnetClick('czzq')"
      >
        <image
          src="/static/images/index/czzq.png"
          class="center-banner-magnet-item-image"
        />
      </view>
      <view
        class="center-banner-magnet-item"
        @tap="handleMagnetClick('cmd')"
      >
        <image
          src="/static/images/index/cmd.png"
          class="center-banner-magnet-item-image"
        />
      </view>
      <view
        class="center-banner-magnet-item"
        @tap="handleMagnetClick('syhyzb')"
      >
        <image
          src="/static/images/index/syhyzb.png"
          class="center-banner-magnet-item-image"
        />
      </view>
      <view
        class="center-banner-magnet-item"
        @tap="handleMagnetClick('lpk')"
      >
        <image
          src="/static/images/index/lpk.png"
          class="center-banner-magnet-item-image"
        />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "CenterBanner",
  methods: {
    handleMagnetClick(type) {
      if(type === 'menu') {
        uni.switchTab({
          url: "/pages/menu/menu"
        })
      }
      if (type === "czzq") {
        uni.navigateTo({
          url: "/pages/customer-center/wallet/wallet"
        })
      }
      if (type === "cmd") {
        uni.showToast({
          title: "功能暂未开放",
          icon: "none"
        })
      }
      if (type === "syhyzb") {
        uni.navigateTo({
          url: "/pages/activity/mosushop/mosushop"
        })
      }
      if (type === "lpk") {
        uni.navigateTo({
          url: "/pages/marketing/gift-card/gift-card"
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.center-banner {
  background-color: #fff;
  border-radius: $uni-border-radius-xl;
  overflow: hidden;

  &-menu {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-bottom: 1rpx solid $uni-border-color;

    &-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      &-image {
        width: 320rpx;
        height: 300rpx;
      }
    }
  }

  &-magnet {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    &-item {
      display: flex;
      align-items: center;
      justify-content: center;

      &-image {
        width: 177.5rpx;
        height: 197.6rpx;
      }
    }
  }
}
</style>
